import React, { useRef } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Form, Input, Upload, message } from 'antd';
import ProForm, {
  ProFormDependency,
  ProFormFieldSet,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { useRequest } from 'umi';

import styles from './BaseView.less';
import { getCurrentUserInfo, updateUser } from '@/services/user/yonghujiekou';
import { flushSync } from 'react-dom';
import { useModel } from '@umijs/max';


const validatorPhone = (rule: any, value: string[], callback: (message?: string) => void) => {
  if (!value[0]) {
    callback('Please input your area code!');
  }
  if (!value[1]) {
    callback('Please input your phone number!');
  }
  callback();
};
// 头像组件 方便以后独立，增加裁剪之类的功能
const AvatarView = ({ avatar }: { avatar: string }) => (
  <>
    <div className={styles.avatar_title}>头像</div>
    <div className={styles.avatar}>
      <img src={avatar} alt="avatar" />
    </div>
    <Upload showUploadList={false}>
      <div className={styles.button_view}>
        <Button>
          <UploadOutlined />
          更换头像
        </Button>
      </div>
    </Upload>
  </>
);

const BaseView: React.FC = () => {
  const formRef = useRef();
  const { initialState, setInitialState } = useModel('@@initialState');

  const [form] = Form.useForm();

  const { data: currentUser, loading } = useRequest(() => {
    return getCurrentUserInfo();
  });


  const getAvatarURL = () => {
    if (currentUser) {
      if (currentUser.avatar) {
        return currentUser.avatar;
      }
      const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
      return url;
    }
    return '';
  };

  const handleFinish = async () => {
    updateUser(form.getFieldsValue()).then(async (res) => {
      if (res.code === 0) {
        message.success('更新基本信息成功');
        const userInfo = await initialState?.fetchUserInfo?.();
        if (userInfo) {
          flushSync(() => {
            setInitialState((s) => ({
              ...s,
              currentUser: userInfo,
            }));
          });
        }
      } else {
        message.error('更新基本信息失败');
      }
    });
  };
  return (
    <div className={styles.baseView}>
      {loading ? null : (
        <>
          <div className={styles.left}>
            <ProForm
              formRef={formRef}
              form={form}
              layout="vertical"
              onFinish={handleFinish}
              submitter={{
                searchConfig: {
                  submitText: '更新基本信息',
                },
                render: (_, dom) => dom[1],
              }}
              initialValues={{
                ...currentUser,
              }}
              hideRequiredMark
            >
              <ProFormText
                width="md"
                name="email"
                label="邮箱"
                rules={[
                  {
                    required: true,
                    message: '请输入您的邮箱!',
                  },
                  {
                    // pattern: /^1\d{10}$/,
                    pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
                    message: '邮箱格式错误！',
                  },
                ]}
              />
              <ProFormText
                width="md"
                name="nickname"
                label="昵称"
                rules={[
                  {
                    required: true,
                    message: '请输入您的昵称!',
                  },
                ]}
              />
              <ProFormText
                width="md"
                name="phone"
                label="手机号码"
                rules={[
                  {
                    required: true,
                    message: '请输入手机号码！',
                  },
                  {
                    pattern: /^1\d{10}$/,
                    message: '手机号码格式错误！',
                  },
                ]}
              />
              <ProFormTextArea
                name="introduce"
                label="个人简介"
                rules={[
                  {
                    required: true,
                    message: '请输入个人简介!',
                  },
                ]}
                placeholder="个人简介"
              />

            </ProForm>

            {/* <div className={styles.right}>
              <AvatarView avatar={getAvatarURL()} />
            </div> */}
          </div>
        </>
      )}
    </div>
  );
};

export default BaseView;
